<template>
	<view class="container">
		<u--form :model="form" ref="uForm">
			<view class="avatarBox">
				<u-form-item label="头像" :border-bottom="true" :required="true" label-width="50">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="avatarUrl"></image>
					</button>
				</u-form-item>
			</view>
			<u-form-item label="昵称" :border-bottom="true" :required="true" label-width="50">
				<u-input type="nickname" placeholder="请输入昵称" border="none" @blur="getNickname" />
			</u-form-item>
			<u-form-item label="登录密码" prop="password" :border-bottom="true" label-width="80" :required="true">
				<u-input type="password" v-model="form.password" placeholder="请输入登录密码" border="none" />
			</u-form-item>
			<u-form-item label="确认登录密码" prop="confirm_password" :border-bottom="true" label-width="110"
				:required="true">
				<u-input type="password" v-model="form.confirm_password" placeholder="请确认登录密码" border="none" />
			</u-form-item>
			<!-- 	<u-form-item label="签署密码" prop="sign_password" :border-bottom="true" label-width="80" :required="true">
				<u-input type="password" v-model="form.sign_password" placeholder="请输入签署密码" border="none" />
			</u-form-item>
			<u-form-item label="确认签署密码" prop="sign_confirm_password" :border-bottom="true" label-width="110"
				:required="true">
				<u-input type="password" v-model="form.sign_confirm_password" placeholder="请确认签署密码" border="none"
					:password-icon="true" />
			</u-form-item> -->
		</u--form>
		<view class="pass-tip">注：密码需字母与数字组合，最少6位</view>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		defineEmits
	} from 'vue';
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app";
	import {
		msg,
		upload,
		goSwitchTab,
	} from "@/utils/common";
	import {
		setMemberInfo
	} from "@/api/module/common";
	const uForm = ref();
	const avatarUrl = ref('')
	const rules = ref({
		password: [{
			required: true,
			message: '请输入登录密码',
			trigger: ['blur', 'change']
		}],
		confirm_password: [{
			required: true,
			message: '请确认登录密码',
			trigger: ['blur', 'change']
		}]
	})
	const form = ref({
		password: '',
		confirm_password: '',
		sign_confirm_password: '',
		nick_name: '',
		image: []
	})
	const data = reactive({
		keyWord: '',
		changeItem: [],
		userType: 1,
		show: true,
		type: 'member',
	});
	const onChooseAvatar = (e) => {
		avatarUrl.value = e.detail.avatarUrl
	}
	const getNickname = (e) => {
		form.value.nick_name = e
	}
	const submit = (e) => {
		setTimeout(() => {
			console.log(form.value);
			uForm.value.validate().then(validate => {
				console.log(validate, 66)
				if (validate) {
					if (!form.value.nick_name) {
						msg('请输入昵称');
						return;
					}
					if (!avatarUrl.value) {
						msg('请上传头像')
						return;
					}
					const tempArr = avatarUrl.value.split('.');
					const tempPathArr = avatarUrl.value.split('/');
					const tempExt = tempArr[tempArr.length - 1];
					const tempName = tempPathArr[tempPathArr.length - 1];
					upload({
						tempName: tempName,
						tempPath: avatarUrl.value,
						tempExt: tempExt,
					}, function(response) {
						form.value.image = response.id;
						setMemberInfo(form.value).then(res => {
							uni.setStorageSync("userInfo", res.member_info)
							goSwitchTab('/pages/home/index');
						}).catch(err => {});
					});
				}
			});
		}, 100)
	}
	onReady(() => {
		uForm.value.setRules(rules.value);
	})
</script>
<style lang="less" scoped>
	.container {
		padding: 80rpx;

		button::after {
			border: none;
		}

		.avatarBox {
			:deep(.u-form-item__body__right__content__slot) {
				flex: 0;
			}
		}

		.avatar-wrapper {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			padding: 0;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				display: block;
			}
		}

		:deep(.u-button) {
			margin-top: 100rpx;
		}

		:deep(.u-form-item__body) {
			padding: 24rpx 0 !important;
		}
	}
</style>